<template>
  <div class="box">
    <h1 class="login-title">登录页面</h1>
    <Collect @onCollection="collectionFunct" />
    <LoginAndRegistration 
      :userName="userName" 
      :password="password"
    />
    <thirdParty />
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userName: '',
      password: '',
    }
  },
  components: {
    Collect: () => import("../../pages/login/components/collect.vue"),
    LoginAndRegistration: () => import("../../pages/login/components/LoginAndRegistration.vue"),
    thirdParty: () => import("../../pages/login/components/thirdParty.vue"),
  },
  methods: {
    collectionFunct({userName, password}) {
      this.userName = userName;
      this.password = password;
    }
  },
}
</script>

<style scoped>
  .box {
    background: url("../../../src/assets/登录背景图.jpg");
    background-position: center;
    background-size: auto;
    
    position: absolute;

    /* background-color: rgb(99, 96, 96); */
    width: 100%;
    height: 100%;
  }
  .login-title {
    font-size: 25px;
    color: #fff;
    Letter-spacing: 4px;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 50px;
  }
</style>